<template>
  <div>
    <main>
      <el-input class="input" placeholder="输入学号"
        v-model="stuID"
        @keyup.enter.native="findResit"
        ref="stuIDInput"
      >
        <el-button slot="append" icon="el-icon-search"
          @click="findResit"
          :disabled="search"
        ></el-button>
      </el-input>
      <el-card class="box-card">
        <div slot="header" class="clearfix firstItem icon-person">{{ resit.stuName }}</div>
        <div class="item icon-stuid"
          v-text="resit.stuID"
        ></div>
        <div class="item icon-college">{{ resit.college }}</div>
        <div class="item icon-class">{{ resit.class }}</div>
        <div class="item icon-exam"
          v-text="resit.courses.length ? `${resit.courses.length} 门重考` : '无重考'"
        ></div>
      </el-card>
      <ResitInfo
        v-for="(val, key) of resit.courses"
        :key="key"
        :course="val"
      ></ResitInfo>
    </main>
    <footer>
      <p>Copyright &copy; 2016 - 2018 <a href="//bitshe.cn">bitshe.cn</a> bit社团</p>
    </footer>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';
import api from './config/api';
import ResitInfo from './components/ResitInfo';

export default {
  name: 'App',
  components: {
    ResitInfo,
  },
  data() {
    return {
      stuID: '',
      search: false,
      resit: {
        stuID: '学号',
        stuName: '姓名',
        college: '院系',
        class: '班级',
        courses: [],
      },

    };
  },
  methods: {
    findResit() {
      if (this.search) {
        return;
      }
      if (this.stuID === '') {
        Message.warning({
          message: '没有填写学号！',
          showClose: true,
        });
        return;
      }
      if (!/^(2[0,1,3]\d{7})$/.test(this.stuID)) {
        Message.warning({
          message: '学号格式不正确！',
          showClose: true,
        });
        return;
      }
      this.search = true;
      axios.get(api.resits.get(this.stuID))
        .then((res) => {
          this.resit = res.data;
          this.search = false;
          this.$refs.stuIDInput.blur();
        })
        .catch((err) => {
          if (err.response === undefined) {
            Message.error({
              message: '网络错误！',
              showClose: true,
            });
            this.search = false;
            return;
          }
          switch (err.response.status) {
            case 400:
              Message.warning({
                message: err.response.data.error,
                showClose: true,
              });
              break;
            case 404:
              Message.success({
                message: err.response.data.error,
                showClose: true,
              });
              break;
            default:
              Message.error({
                message: err,
                showClose: true,
              });
              break;
          }
          this.search = false;
        });
    },
  },
};
</script>

<style>
  main {
    height: 100%;
    box-sizing: border-box;
    padding: 40px 20px;
  }
  .input {
    margin-top: 40px;
    margin-bottom: 16px;
  }
  .el-card {
    margin-top: 16px;
  }
  .firstItem {
    font-size: 16px;
    line-height: 1.5em;
    height: 1.5em;
  }
  .item {
    font-size: 14px;
    line-height: 3em;
    height: 3em;
  }
  footer {
    font-size: 12px;
    text-align: center;
    color: #c0c4cc;
    padding-bottom: 20px;
  }
  footer p a {
    text-decoration: none;
    color: #c0c4cc;
  }
  footer p a:hover {
    text-decoration: underline;
  }
  [class*=" icon-"],
  [class^="icon-"] {
    padding-left: 32px;
    background: url() no-repeat 0 50% / 20px;
  }
  .icon-person {
    background-image: url(./assets/icon/person.svg);
  }
  .icon-stuid {
    background-image: url(./assets/icon/stuid.svg);
  }
  .icon-college {
    background-image: url(./assets/icon/college.svg);
  }
  .icon-class {
    background-image: url(./assets/icon/class.svg);
  }
  .icon-exam {
    background-image: url(./assets/icon/exam.svg);
  }
  .icon-course {
    background-image: url(./assets/icon/course.svg);
  }
  .icon-clock {
    background-image: url(./assets/icon/clock.svg);
  }
  .icon-site {
    background-image: url(./assets/icon/site.svg);
  }
  .icon-credit {
    background-image: url(./assets/icon/credit.svg);
  }
  .icon-notes {
    background-image: url(./assets/icon/notes.svg);
  }
</style>
